/**
 * 简易图表工具类
 * 用于在小程序中绘制简单的图表
 */

class UCharts {
  constructor(opts) {
    this.opts = opts
    this.config = {
      type: opts.type || 'line',
      context: opts.context,
      width: opts.width || 300,
      height: opts.height || 200,
      categories: opts.categories || [],
      series: opts.series || [],
      padding: opts.padding || [10, 10, 10, 10],
      dataLabel: opts.dataLabel !== false,
      legend: opts.legend !== false,
      extra: opts.extra || {}
    }
    
    this.init()
  }
  
  init() {
    const { context, width, height, padding } = this.config
    
    // 清空画布
    context.clearRect(0, 0, width, height)
    
    // 根据图表类型绘制
    switch (this.config.type) {
      case 'radar':
        this.drawRadar()
        break
      default:
        console.warn('不支持的图表类型:', this.config.type)
    }
    
    // 绘制到画布
    context.draw()
  }
  
  drawRadar() {
    const { context, width, height, categories, series, padding, extra } = this.config
    
    // 雷达图配置
    const radarConfig = extra.radar || {}
    const max = radarConfig.max || 100
    const gridCount = radarConfig.gridCount || 5
    const gridColor = radarConfig.gridColor || '#CCCCCC'
    const labelColor = radarConfig.labelColor || '#666666'
    
    // 计算中心点和半径
    const centerX = width / 2
    const centerY = height / 2
    const radius = Math.min(width, height) / 2 - Math.max(...padding)
    
    // 绘制网格
    const angleStep = (Math.PI * 2) / categories.length
    
    // 绘制同心圆网格
    context.setLineWidth(1)
    context.setStrokeStyle(gridColor)
    context.setFontSize(12)
    context.setTextAlign('center')
    context.setTextBaseline('middle')
    
    for (let i = 1; i <= gridCount; i++) {
      const r = radius * (i / gridCount)
      context.beginPath()
      for (let j = 0; j < categories.length; j++) {
        const angle = j * angleStep - Math.PI / 2
        const x = centerX + r * Math.cos(angle)
        const y = centerY + r * Math.sin(angle)
        if (j === 0) {
          context.moveTo(x, y)
        } else {
          context.lineTo(x, y)
        }
      }
      context.closePath()
      context.stroke()
    }
    
    // 绘制轴线
    for (let i = 0; i < categories.length; i++) {
      const angle = i * angleStep - Math.PI / 2
      const x = centerX + radius * Math.cos(angle)
      const y = centerY + radius * Math.sin(angle)
      
      context.beginPath()
      context.moveTo(centerX, centerY)
      context.lineTo(x, y)
      context.stroke()
      
      // 绘制标签
      const labelX = centerX + (radius + 15) * Math.cos(angle)
      const labelY = centerY + (radius + 15) * Math.sin(angle)
      
      context.setFillStyle(labelColor)
      context.fillText(categories[i], labelX, labelY)
    }
    
    // 绘制数据
    if (series.length > 0) {
      const data = series[0].data
      const color = series[0].color || '#1890FF'
      
      context.beginPath()
      for (let i = 0; i < categories.length; i++) {
        const value = data[i]
        const ratio = value / max
        const angle = i * angleStep - Math.PI / 2
        const x = centerX + radius * ratio * Math.cos(angle)
        const y = centerY + radius * ratio * Math.sin(angle)
        
        if (i === 0) {
          context.moveTo(x, y)
        } else {
          context.lineTo(x, y)
        }
      }
      context.closePath()
      context.setFillStyle(color)
      context.setGlobalAlpha(0.3)
      context.fill()
      
      context.setGlobalAlpha(1)
      context.setLineWidth(2)
      context.setStrokeStyle(color)
      context.stroke()
      
      // 绘制数据点
      for (let i = 0; i < categories.length; i++) {
        const value = data[i]
        const ratio = value / max
        const angle = i * angleStep - Math.PI / 2
        const x = centerX + radius * ratio * Math.cos(angle)
        const y = centerY + radius * ratio * Math.sin(angle)
        
        context.beginPath()
        context.arc(x, y, 4, 0, Math.PI * 2)
        context.setFillStyle('#FFFFFF')
        context.fill()
        context.setLineWidth(2)
        context.setStrokeStyle(color)
        context.stroke()
      }
    }
  }
  
  updateData(opts) {
    if (opts.series) {
      this.config.series = opts.series
    }
    
    if (opts.categories) {
      this.config.categories = opts.categories
    }
    
    this.init()
  }
}

export default UCharts